통신 예

① 클라이언트의 이벤트가 Ajax 이벤트를 발생시킨다.

    <input type="text" d="email" name="email" onblur="validateEmail();"> 

② XMLHttpRequest 객체가 생성됨

• open() 메소드를 통해 호출이 성립되는데, URL은 특정 HTTP메소드와 함께 설정됨
• send() 메소드를 호출함으로써 비로소 요청이 발생함

    var xmlHttp;

    function validateEmail(){
      var email = document.getElementById("email");
      var url = "validate?email=" + escape(email.value);
      if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }else {
        xmlHttp = new XMLHttpRequest();
      }

      xmlHttp.open("GET", url);
      xmlHttp.onreadystatechange = callback;
      xmlHttp.send(null);
    }

③ 요청이 서버로 전달된다. 서블릿이나 CGI 스크립트 등 서버측 프로그램을 호출할 것이다.

④ 요청을 받은 서버는 데이타 저장소나 타 시스템에 접근하여 작업하게 된다.

⑤ 요청이 브라우저로 돌아온다.

• Context-Type이 text/xml형식으로 지정되었기 때문에 XMLHttpRequest 객체는 text/html 유형의 결과만을 처리할 수 있다.
• 브라우저가 결과값을 개쉬하는 일이 없도록 헤더를 설정해야 한다는 사실을 유념하도록 한다.

response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");

⑥ 응답이 변환되면 callback() 함수를 부른다

 function callback(){
    if(xmlHttp.readStat == 4) {         //complete
      if(xmlHttp.status == 200) {       //상태정상
        //do something interesting here
       //응답 후 로직을 구현하면 된다. 
      }
    }
  }

그림. Ajax를 통한 클라이언트-서버간 상호작용

문서에 대하여

• 최초작성자 : 김정식
• 최초작성일 : 2007년 8월 24일
• 이 문서는 사이텍미디어 출판사의 Foundations of Ajax(저자:RYAN ASLESON),(역자:박형일)을 정리한 내용 입니다.